<template>
  <div class="upload-container">
    <el-upload
      :action = "action"
      :show-file-list="false"
      :headers="headers"
      :http-request="uploadFile">
      <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary">上传图片</el-button>
    </el-upload>
  </div>
</template>

<script>
// import {getUserInfro} from '@/utils/auth'
import { host } from '../../../../config/host.url'
import axios from 'axios'
export default {
  name: 'EditorSlideUpload',
  props: {
    color: {
      type: String,
      default: '#1890ff'
    },
    resPath: {
      type: String,
      default: 'proImg'
    }
  },
  data() {
    return {
      dialogVisible: false,
      action: '',
      headers: ''
    }
  },
  created() {
    this.initUploadFileurl()
  },
  methods: {
    initUploadFileurl() {
      // const token = JSON.parse(getUserInfro()).token
      // this.action = process.env.BASE_API + "file/uploadImageAndCrtThumbImages";
      // this.action = "https://1chalk.com/memorial-hall-admin/file/uploadImageAndCrtThumbImages";
      this.headers = {
        // Authorization: token,
        'Content-Type': 'multipart/form-data'
      }
    },
    uploadFile(content) {
      const fd = new FormData()
      fd.append('images', content.file)
      // fd.append("resPath", this.resPath);
      const fileSize = fd.size / 1024 / 1024
      if (fileSize > 2) {
        this.$message({
          message: '上传图片不能大于2M',
          type: 'warning'
        })
      } else {
        axios.post(
          this.action,
          fd,
          { headers: this.headers }
        )
          .then(res => {
            const data = res.data.data
            this.$emit('successCBK', host.url + '/' + data[0].minImageUrl)
            console.log(data)
            // console.log('https://1chalk.com/'+data[0].maxImageUrl);
            this.$message({
              message: '上传成功',
              type: 'success'
            })
          })
          .catch(e => {
            console.log(e)
          })
      }
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>

</style>
